<!DOCTYPE html>
<html>
  <head>
    <title>analytics.js demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      li li h4 {
        margin: 8px 0 0 0;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <h4>Tracking common user interactions</h4>
        <ul>
          <li>
            <h4>Event Measurement</h4>
            <ul>
              <li><a href="#" id="linkEvent1">Category, action, label, value</a></li>
              <li><a href="#" id="linkEvent2">Category, action, label, nonInteraction</a></li>
              <li><a href="#" id="linkEvent3">Category, action, label, invalid value</a></li>
            </ul>
          </li>
          <li>
            <h4>Social Interactions</h4>
            <ul>
              <li><a href="#" id="linkSocialValid">Valid</a></li>
              <li><a href="#" id="linkSocialInvalid">Invalid</a></li>
            </ul>
          </li>

          <li>
            <h4>App / Screen Measurement</h4>
            <ul>
              <li><a href="#" id="linkScreen1">screenName</a></li>
              <li><a href="#" id="linkScreen2">screenName, appName, appId, appVersion, appInstallerId</a></li>
            </ul>
          </li>

          <li>
            <h4>User Timings</h4>
            <ul>
              <li><a href="#" id="linkTimingsValid">Valid</a></li>
              <li><a href="#" id="linkTimingsInvalid">Invalid</a></li>
            </ul>
          </li>

          <li>
            <h4>Exceptions Tracking</h4>
            <ul>
              <li><a href="#" id="linkExceptions">Demo exception</a></li>
            </ul>
          </li>

        </ul>
      </li>

       <li>
        <h4>Ecommerce plugin</h4>
        <ul>
          <li><a href="#" id="linkEcAddTranscation">Adding a Transaction</a></li>
        </ul>
      </li>

      <li>
        <h4>Enhanced Ecommerce plugin</h4>
        <ul>
          <li><a href="#" id="linkEcImpression">Measuring a Product Impression</a></li>
          <li><a href="#" id="linkEcClick">Measuring a Product Click</a></li>
          <li><a href="#" id="linkEcDetails">Measuring a Product Details View</a></li>
          <li><a href="#" id="linkEcAddCart">Measuring an Addition to Cart</a></li>
          <li><a href="#" id="linkEcRemoveCart">Measuring a Removal from Cart</a></li>
          <li><a href="#" id="linkEcCheckoutPayment">Measuring Checkout Process (Payment)</a></li>
          <li><a href="#" id="linkEcCheckoutShipping">Measuring Checkout Process (Shipping)</a></li>
          <li><a href="#" id="linkEcTransaction">Measuring a Transaction</a></li>
          <li><a href="#" id="linkEcRefund">Measuring a Refund</a></li>
          <li><a href="#" id="linkEcAddPromo">Measuring Internal Promotions</a></li>
        </ul>
      </li>
    </ul>




    <script type="text/javascript">

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga("create", "UA-129292661-3", "auto", {"allowLinker": true});
  ga("require", "linker");
  ga("linker:autoLink", [ "www.puppetry.app" ]);
  ga("require", "displayfeatures");
  ga("set", "anonymizeIp", true);
  ga("require", "ecommerce");
  ga("require", "ec");
  ga("set", "currencyCode", "EUR");
  ga("set", "appName", "Puppetry");
  ga("require", "linkid");
  ga("send", "pageview");

  document.addEventListener( "DOMContentLoaded", function() {
    function listen( sel, ev, handler ) {
      document.querySelector( sel ).addEventListener( ev, function( e ){
        e.preventDefault();
        handler( e );
      }, false );
    }
    var fixProduct = {
      "id": "P12345",
      "name": "Android Warhol T-Shirt",
      "category": "Apparel",
      "brand": "Google",
      "variant": "black",
      "price": "30",
      "quantity": "1"
    }, TID = "T12345";


    listen( "#linkEcAddTranscation", "click", function(){
      ga("ecommerce:addItem", {
        "id": "1234",                     // Transaction ID. Required.
        "name": "Fluffy Pink Bunnies",    // Product name. Required.
        "sku": "DD23444",                 // SKU/code.
        "category": "Party Toys",         // Category or variation.
        "price": "11.99",                 // Unit price.
        "quantity": "1"                   // Quantity.
      });

      ga("ecommerce:addTransaction", {
        "id": TID,
        "affiliation": "Acme Clothing",
        "revenue": "11.99",
        "shipping": "5",
        "tax": "1.29"
      });
      ga( "ecommerce:send" );
    });

    listen( "#linkEvent1", "click", function(){
      ga( "send", "event", "Videos", "play", "Fall Campaign", 1 );
    });
    listen( "#linkEvent2", "click", function(){
      ga( "send", "event", "Videos", "stop", "Fall Campaign", {
        nonInteraction: true
      });
    });
    listen( "#linkEvent3", "click", function(){
      ga( "send", "event", "Videos", "play", "Invalid", "Invalid" );
    });

    listen( "#linkSocialValid", "click", function(){
      ga("send", "social", "Facebook", "like", "https://puppetry.app");
    });

    listen( "#linkSocialInvalid", "click", function(){
      ga("send", "social", "Invalid", "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa", "https://puppetry.app");
    });

    listen( "#linkScreen1", "click", function(){
      ga("send", "screenview", { screenName: "Home" } );
    });
    listen( "#linkScreen2", "click", function(){
      ga("send", "screenview", { screenName: "Docs", appName: "Puppetry", appId: "1234", appVersion: "3.0.0", appInstallerId: "1234" } );
    });

    listen( "#linkTimingsValid", "click", function(){
      ga("send", "timing", "JS Dependencies", "load", 3549);
    });
    listen( "#linkTimingsInvalid", "click", function(){
      ga("send", "timing", "JS Dependencies", "invalid", "Invalid");
    });

    listen( "#linkExceptions", "click", function(){
       ga("send", "exception", {
        "exDescription": "Demo exception thrown",
        "exFatal": false
      });
    });
    listen( "#linkEcImpression", "click", function(){
      ga("ec:addImpression", {
        "id": "P12345",                   // Product details are provided in an impressionFieldObject.
        "name": "Android Warhol T-Shirt",
        "category": "Apparel/T-Shirts",
        "brand": "Google",
        "variant": "black",
        "list": "Search Results",
        "position": 1,
        "price": 30
      });

      ga("ec:addImpression", {
        "id": "P67890",
        "name": "YouTube Organic T-Shirt",
        "category": "Apparel/T-Shirts",
        "brand": "YouTube",
        "variant": "gray",
        "list": "Search Results",
        "position": 2,
        "price": 40
      });

      ga("send", "event", "Ecommerce", "Impression", "YouTube Organic T-Shirt");

    });

    listen( "#linkEcClick", "click", function(){
       ga("ec:addProduct", {
        "id": "P12345",
        "name": "Android Warhol T-Shirt",
        "category": "Apparel",
        "brand": "Google",
        "variant": "black",
        "position": 1,
        "quantity": 1,
        "price": 30,
        "coupon": "SUMMER"
      });
      ga("ec:addProduct", {
        "id": "P12346",
        "name": "Android Warhol T-Shirt2",
        "category": "Apparel",
        "brand": "Google",
        "variant": "black",
        "position": 2,
        "quantity": 1,
        "price": 40,
        "coupon": "SUMMER"
      });
      ga("ec:setAction", "click", {list: "Search Results"});

      // Send click with an event, then send user to product page.
      ga("send", "event", "Ecommerce", "click", "Results");

    });


    listen( "#linkEcDetails", "click", function(){
       ga("ec:addProduct", {
        "id": "P12345",
        "name": "Android Warhol T-Shirt",
        "category": "Apparel",
        "brand": "Google",
        "variant": "black"
      });

      ga("ec:setAction", "detail");

      // Send click with an event, then send user to product page.
      ga("send", "event", "Ecommerce", "details", "Android Warhol T-Shirt", { "nonInteraction": 1 });

    });

    listen( "#linkEcAddCart", "click", function(){
      ga("ec:addProduct", fixProduct );
      ga("ec:setAction", "add");
      ga("send", "event", "Ecommerce", "add to cart", "Android Warhol T-Shirt");
    });

    listen( "#linkEcRemoveCart", "click", function(){
      ga("ec:addProduct", fixProduct );
      ga("ec:setAction", "remove");
      ga("send", "event", "Ecommerce", "remove from cart", "Android Warhol T-Shirt");
    });

    listen( "#linkEcCheckoutPayment", "click", function(){
      ga("ec:addProduct", fixProduct );
      ga("ec:setAction","checkout", {
          "step": 1,            // A value of 1 indicates this action is first checkout step.
          "option": "Visa"      // Used to specify additional info about a checkout stage, e.g. payment method.
      });
      ga("send", "event", "Ecommerce", "payment", "Android Warhol T-Shirt");
    });

    listen( "#linkEcCheckoutShipping", "click", function(){
      ga("ec:addProduct", fixProduct );
      ga("ec:setAction","checkout", {"step": 2});
      ga("send", "event", "Ecommerce", "shipping", "Android Warhol T-Shirt");
    });

    listen( "#linkEcTransaction", "click", function(){
      ga("ec:addProduct", fixProduct );
      ga("ec:setAction", "purchase", {
        "id": TID,
        "affiliation": "Google Store - Online",
        "revenue": "37.39",
        "tax": "2.85",
        "shipping": "5.34",
        "coupon": "SUMMER2013"
      });
      ga("send", "event", "Ecommerce", "transaction", "Android Warhol T-Shirt");
    });

    listen( "#linkEcRefund", "click", function(){
      ga("ec:addProduct", fixProduct );
      ga("ec:setAction", "refund", {
          "id": TID
      });
      ga("send", "event", "Ecommerce", "refund", "Android Warhol T-Shirt");
    });

    listen( "#linkEcAddPromo", "click", function(){
      ga('ec:addPromo', {               // Promo details provided in a promoFieldObject.
        'id': 'PROMO_1234',             // Promotion ID. Required (string).
        'name': 'Summer Sale',          // Promotion name (string).
        'creative': 'summer_banner2',   // Creative (string).
        'position': 'banner_slot1'      // Position  (string).
      });
      ga('ec:setAction', 'promo_click');
      ga("send", "event", "Ecommerce", "add promo", "Summer Sale");
    });



  });

    </script>
  </body>
</html>
